<template>
  <div class="global">
    <div class="head">
      <el-input
        placeholder="请输入用户名"
        v-model="username"
        class="useinput"
      ></el-input>
      <el-button type="primary" @click="chaxun">查询</el-button>
      <el-button type="primary" @click="chongzhi">重置</el-button>
    </div>
    <div class="content">
      <div>
        <el-button type="primary" @click="adduser">添加用户</el-button
        ><el-button type="primary" @click="plsc">批量删除</el-button>
      </div>
      <el-table
        :data="tableData"
        @selection-change="handlechange1"
        border
        style="width: 100%; margin: 10px 0px"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="#" width="55" />
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="用户名" />
        <el-table-column prop="username" label="用户昵称" />
        <el-table-column prop="roleName" label="用户角色">
          <template v-slot="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.roleName"
              placement="top"
            >
              <div class="hh">{{ scope.row.roleName }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column label="操作" width="350">
          <template v-slot="scope">
            <el-button type="primary" :icon="User" @click="fpjs(scope.row)"
              >分配角色</el-button
            >
            <el-button type="primary" :icon="EditPen" @click="bianji(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              :icon="Delete"
              @click="shanchu(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="5"
        @current-change="handlechange"
        :total="total"
      />
    </div>
    <el-drawer
      v-model="drawer"
      :title="title1"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名称" required>
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="用户昵称" required>
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="用户密码" required>
          <el-input v-model="form.password" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button @click="qx">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-drawer
      v-model="drawer1"
      :title="title2"
      :direction="direction"
      :before-close="handleClose1"
    >
      <el-form :model="form1" label-width="120px">
        <el-form-item label="用户名称" required>
          <el-input v-model="form1.username" />
        </el-form-item>
        <el-form-item label="用户昵称" required>
          <el-input v-model="form1.name" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit1">确认</el-button>
          <el-button @click="qx">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-drawer
      v-model="drawer3"
      :title="title3"
      :direction="direction"
      :before-close="handleClose2"
    >
      <el-input v-model="username1" disabled />
      <p>职位列表</p>
      <el-checkbox-group v-model="checkList" @change="xgzw">
        <el-checkbox :label="item.id" v-for="item in allRolesList">
          {{ item.roleName }}</el-checkbox
        >
      </el-checkbox-group>
      <el-button type="primary" @click="onSubmit2">确认</el-button>
      <el-button @click="qx2">取消</el-button>
    </el-drawer>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import {
  Delete,
  Edit,
  Search,
  Share,
  EditPen,
  User,
} from "@element-plus/icons-vue";
import instance from "../assets/axiosinstance.js";

import { ElMessage, ElMessageBox } from "element-plus";


const username = ref("");
const drawer3 = ref(false);
const id1 = ref("");
const title3 = ref("分配职位");
const username1 = ref("");
const checkList = ref([]);

const form = ref({
  id: 0,
  name: "",
  username: "",
  password: "",
});
const form1 = ref({
  id: "",
  name: "",
  username: "",
});
const allRolesList = ref([]);
const handleClose2 = () => {
  drawer3.value = false;
};
const xgzw = (e) => {
  console.log(e);
  checkList.value = e;
};
const fpjs = async (e) => {
  username1.value = e.username;
  id1.value = e.id;
  drawer3.value = true;
  const res = await instance.get(`/admin/acl/user/toAssign/${e.id}`);
  console.log(res);
  allRolesList.value = res.data.allRolesList;
  res.data.assignRoles.forEach((el) => {
    checkList.value.push(el.id);
  });
  console.log(checkList.value);
};
const handlechange1 = (e) => {
  console.log(e);
  xz.value = [];
  e.forEach((el) => {
    xz.value.push(el.id);
  });
};
const xz = ref([]);
const plsc = async () => {
  if (xz.value.length == 0) {
    ElMessage({
      message: "请选择数据",
      type: "warning",
      duration: 3 * 1000,
    });
  } else {
    const res = await instance.delete(`/admin/acl/user/batchRemove`, {
      data: xz.value,
    });
    if (res.code !== 200) {
      ElMessage({
        message: "包含数据不能操作",
        type: "warning",
        duration: 3 * 1000,
      });
    } else {
      getdata();
    }
    console.log(res);
  }
};
const bianji = (e) => {
  console.log(e);
  title2.value = "编辑用户";
  drawer1.value = true;
  form1.value = JSON.parse(JSON.stringify(e));
  console.log(form1.value);
};
const chongzhi = () => {
  page.value = 1;
  username.value = "";
  getdata();
};
const chaxun = () => {
  page.value = 1;
  getdata();
};
const shanchu = (e) => {
  console.log(e);
  ElMessageBox.confirm("是否确认删除该条数据?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      const res = await instance.delete(`/admin/acl/user/remove/${e}`);
      console.log(res);
      if (res.code == 200) {
        getdata();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};
const qx2 = () => {
  drawer3.value = false;
};
const qx = () => {
  drawer.value = false;
  form.value = ref({
    id: 0,
    name: "",
    username: "",
    password: "",
  });
  console.log(form.value);
};
const onSubmit2 = async () => {
  const res = await instance.post("/admin/acl/user/doAssignRole", {
    roleIdList: checkList.value,
    userId: id1.value,
  });
  console.log(res);
  if (res.code == 200) {
    drawer3.value = false;
    getdata()
  }
};
const onSubmit1 = async () => {
  console.log(form);
  const res = await instance.put("/admin/acl/user/update", form1.value);
  console.log(res);
  if (res.code == 200) {
    drawer1.value = false;
    getdata();
  }
};
const onSubmit = async () => {
  console.log(form);
  const res = await instance.post("/admin/acl/user/save", form.value);
  console.log(res);
  if (res.code == 200) {
    drawer.value = false;
    getdata();
  }
};
const adduser = () => {
  title1.value = "新增用户";
  drawer.value = true;
};
const title1 = ref("");
const drawer = ref(false);
const title2 = ref("");
const drawer1 = ref(false);
const direction = ref("rtl");
const handleClose = () => {
  drawer.value = false;
};
const handlechange = (e) => {
  console.log(e);
  page.value = e;
  getdata();
};
const total = ref(0);
const page = ref(1);
const limit = ref(5);
const tableData = ref([]);
const getdata = async () => {
  const res = await instance.get(
    `/admin/acl/user/${page.value}/${limit.value}/?username=${username.value}`
  );
  tableData.value = res.data.records;
  console.log(res);
  total.value = res.data.total;
};
onMounted(() => {
  getdata();
});
</script>
<style scoped>
.hh {
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  overflow: hidden;
}
.content {
  width: 100%;
  height: auto;
  margin-top: 15px;
  padding: 20px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
}
.useinput {
  width: 180px;
  float: left;
  margin-right: 10px;
}
.global {
  width: 100%;
  height: 100%;
}
.head {
  width: 100%;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
</style>